<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<image :src="item.detailsImg"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<scroll-view class="goods-image-list" scroll-x="true" v-show="false">
			<view id="demo1" class="goods-image-item uni-bg-red">A</view>
			<view id="demo2" class="goods-image-item uni-bg-green">B</view>
			<view id="demo3" class="goods-image-item uni-bg-blue">C</view>
			<view id="demo1" class="goods-image-item uni-bg-red">A</view>
			<view id="demo2" class="goods-image-item uni-bg-green">B</view>
			<view id="demo3" class="goods-image-item uni-bg-blue">C</view>
			<view id="demo1" class="goods-image-item uni-bg-red">A</view>
			<view id="demo2" class="goods-image-item uni-bg-green">B</view>
			<view id="demo3" class="goods-image-item uni-bg-blue">C</view>
		</scroll-view>


		<view class="goods-info" v-for="(item,index) in namePriceImg" :key="item.detailsId" v-if="item.detailsId==1">
			<view class="goods-price">到手价 {{item.spu.spuBooksPrice}}</view>
			<view class="goods-title">{{item.books.booksName}}</view>
			<view class="goods-icons">
				<view class="goods-icon">
					<uni-icons type="redo" size="30"></uni-icons>
					<text class="buttons_title">分享</text>
				</view>
				<view class="goods-icon">
					<uni-icons type="star" size="30"></uni-icons>
					<text class="buttons_title">收藏</text>
				</view>
				<view class="goods-icon">
					<uni-icons type="wallet" size="30"></uni-icons>
					<text class="buttons_title">降价通知</text>
				</view>
			</view>
		</view>


		<view class=" goods-floor" v-for="(item,index) in namePriceImg2" :key="index"
			v-if="itemId ==item.specificationsId">
			<view class="sku-info" @click="showSkuAttr">
				<view class="sku-selected">
					<text class="item-title">已选</text>
					<text class="item-choose" id="skuChoose">{{item.specificationsName}}，{{number}}个</text>
				</view>
			</view>
		</view>

		<template>
			<view class="contents">
				<view class="mod_discount" id="discountFloor" @click="opencoupon()">
					<span class="title">优惠</span>
					<view class="contents">
						<view class="discount_coupon_minus" style="">
							<span class="minus_coupon">跨店每满300减40</span><br />
							<span class="coupon ">满1000减120</span><br />
							<span>满800减80</span><span class="coupon ">满399减20</span>
						</view>
					</view>
				</view>
				<!-- 选择优惠券弹出层 -->

				<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
				<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
					<scroll-view class="scrollssss" scroll-y>
						<!-- colors:按钮颜色 couponList:优惠卷列表数据  @onReceive：领取或立即使用按钮事件 -->
						<cc-defineCoupon colors="#fa436a" :couponList="couponList"
							@onReceive="onReceive"></cc-defineCoupon>
					</scroll-view>
				</view>
			</view>
		</template>




		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick" />
		</view>

		<view>
			<!-- 选择SKU弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change" borderRadius="10px 10px 0px 0px"
				@description>
				<view class="popup-content" v-for="(item,index) in namePriceImg2" :key="item.specificationsId">
					<view class="popup-sku">
						<view class="popup-sku-image">
							<image :src="item.specificationsImg"
								style="width: 100px; height: 100px; margin-left: 20px;">
							</image>
						</view>
						<view class="popup-sku-info">
							<view class="popup-sku-price">到手价：{{item.specificationsPrice}}</view>
							<view class="popup-sku-selected-attr">
								已选{{item.specificationsName }}
								<p v-model="namesku">{{namesku}}</p>
							</view>
						</view>

						<view class="popup-sku-close" @click="closeSelect">
							<uni-icons type="close" size="24"></uni-icons>
						</view>
					</view>
					<view class="popup-sku-attr" v-for="(item,index) in guiges" :key="item.specificationsId">
						<view v-if="item.specificationsNumber==1">
							<view class="popup-sku-attr-title" v-if="index==0">
								{{item.sizesku.skuName}}
							</view>
							<view class="popup-sku-attr-valus" @click="xuan(item.specificationsId)">
								<view class="attr-val"
									:style="{ color: itemId === item.specificationsId ? 'red' : 'black' }">
									{{item.specificationsName}}
								</view>
							</view>
						</view>
					</view>
					<!-- WXML模板 -->
					<view class="popup-sku-attr" v-for="(item, index) in guiges" :key="item.specificationsId">
						<view v-if="item.specificationsNumber === 2">
							<view class="popup-sku-attr-title" v-if="index === 10">
								{{ item.sizesku.skuName }}
							</view>
							<view class="popup-sku-attr-valus"
								@click="dan(item.specificationsId, item.specificationsName)">
								<view class="attr-valsss"
									:style="{ color: currentId === item.specificationsId ? 'red' : 'black' }">
									{{ item.specificationsName }}
								</view>
							</view>
						</view>
					</view>

					<view class="popup-sku-attr" style="display: none;">
						<view class="popup-sku-attr-title">
							尺寸
						</view>
						<view class="popup-sku-attr-valus">
							<view class="attr-val">XL</view>
							<view class="attr-val">XXL</view>
						</view>
					</view>


					<view class="buyer-sku">
						<view class="popup-sku-attr-title">
							数量
						</view>

						<view class="popup-sku-attr-num">
							<uni-number-box value="1" :min="1" @change="changeValue" v-model="number" />
						</view>

					</view>


					<view class="popup-bottons">
						<view class="uni-tab__cart-button-left" @click="buttonClick(cart)">
							<text class="uni-tab__cart-button-right-text">
								加入购物车
							</text>
						</view>
						<view class="uni-tab__cart-button-right" @click="buttonClick(cart)">
							<text class="uni-tab__cart-button-right-text">
								立即购买
							</text>

						</view>
					</view>


				</view>
			</uni-popup>

		</view>


	</view>
</template>

<script>
	import {
		xuan,
		jia,
		priceNameImg,
		guige
	} from "../appjs/datailsJs/detailsjs.js"
	import {
		addCart,
		count
	} from "../appjs/gouwucn/gouwucnJs.js";
	export default {
		data() {
			return {
				couponshow: false,
				currentId: '',
				namesku: '',
				cart: {
					userId: '',
					skuId: '',
					carttNumber: '',
					cartPrince: '',
					shopId: '',
					sizeskuId: '',
				},
				couponList: [ //优惠券列表
					{
						money: 100,
						reduce: 10,
						date: '2024-05-09 2024-10-02',
						id: 1,
						status: 0,
						condition: ['新人专享', '通用卷']
					}, {
						money: 100,
						reduce: 20,
						date: '2024-02-09 2024-10-02',
						id: 2,
						status: 0,
						condition: ['会员专享', '通用卷']
					}, {
						money: 100,
						reduce: 30,
						date: '2024-02-09 2024-10-02',
						id: 3,
						status: 0,
						condition: ['数码产品可用', '不可与其他产品共享']
					}, {
						money: 100,
						reduce: 40,
						date: '2024-02-09 2024-10-02',
						id: 4,
						status: 0,
						condition: ['新人专享', '可与其他产品共享']
					}, {
						money: 100,
						reduce: 50,
						date: '2023-02-09 2023-10-02',
						id: 5,
						status: 0,
						condition: ['新人专享', '仅在支付时使用']
					}
				],
				number: 1,
				// borderRadius:"",
				info: [],
				itemId: '1',
				namePriceImg: [],
				namePriceImg2: [],
				guiges: [],
				dotStyle: {
					// backgroundColor: 'rgba(255, 90, 95,0.3)',
					width: '20%',
					bottom: '20px',
					left: '86%',
					textWidth: '100%',
					textPaddingLeft: "",
					borderRadius: "20px",
					padding: "2px 0",
					justifyContent: "flex-end",
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				modeIndex: -1,
				current: 0,
				mode: 'nav',
				swiperDotIndex: 0,
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				uid: '',

			}
		},
		onLoad() {
			if (this.$user.password == null || this.$user.password == "" || this.$user.username == null || this.$user
				.username == '') {
				uni.reLaunch({
					url: "/pages/longin/longin"
				})
			} else {
				this.uid = this.$user.uid;
			}
			this.count(this.uid);
			this.xuan(this.itemId);
			this.jia();
			this.priceNameImg();
			this.guige();

		},
		methods: {
			dan(itemID, name) {
				let a = this
				a.currentId = itemID;
				a.cart.sizeskuId = name;
				console.log(a.cart.sizeskuId)
				a.namesku = name;

				console.log("itemidssss", itemID)
				console.log("name", name)
			},
			cha(id) {
				console.log(id)
			},
			xuan(itemID) {
				let that = this;
				xuan(itemID).then(function(data) {
					that.namePriceImg2 = [...data.data]
					that.itemId = itemID
					data.data.forEach((item, index) => {
						that.cart.skuId = item.specificationsSpuId;
						that.cart.cartPrince = item.specificationsPrice;
						that.cart.shopId = item.specificationsId;
					})
				})
			},
			count(uid) {
				this.cart.userId = this.$user.uid;
				count(uid).then(data => {
					console.log("dataMap: ", data);
					this.options[2].info = data.count;
				})
			},
			buttonClick(cart) {
				let b = parseInt(this.number)
				this.cart.userId = this.$user.uid;
				console.log("颜色：", this.cart.sizeskuId)
				console.log(b)
				let num = b
				this.cart.carttNumber = num;
				// console.log("数量a", a)
				console.log("数量b", b)
				// console.log("数量num", num)
				addCart(cart).then(data => {
					console.log("userId", this.cart.userId)
					console.log("数量", this.cart.carttNumber)
					console.log("cart", this.cart)
					console.log("返回值：", data)
					if (data == true) {
						uni.showToast({
							title: "添加成功",
						})
						this.count(this.cart.userId);
						this.closeSelect();
					} else {
						uni.showToast({
							title: "网络不稳定！"
						})
					}

				})
			},
			// 打开优惠券弹框 
			opencoupon() {
				this.couponshow = true
			},
			// 关闭优惠券弹框 
			hidecoupon() {
				this.couponshow = false
			},
			//领取优惠券 立即使用事件
			onReceive(item, index) {
				console.log(item, index)
				if (item.status == 1) {
					// 立即使用 事件
				} else {
					this.couponList[index].status = 1 //领取成功
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
				}
			},
			jia() {
				let s = this;
				jia().then(function(data) {
					s.info = [...s.info, ...data.data]
				})
			},
			priceNameImg() {
				let s = this;
				priceNameImg().then(function(data) {
					s.namePriceImg = [...s.namePriceImg, ...data.data]
				})
			},
			guige() {
				let s = this;
				guige().then(function(data) {
					s.guiges = [...s.guiges, ...data.data]
				})
			},
			closeSelect() {
				this.$refs.popup.close();
			},
			change(e) {
				// console.log( e)
				// this.current =e.detail;
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			showSkuAttr() {
				this.$refs.popup.open("bottom")
			},
			changeValue(e) {
				this.number = e;
			},
			onClick() {
				uni.switchTab({
					url: "/pages/gouwucn/gouwucn",
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.attr-valsss {

		height: 20px;
		border-radius: 20px;
		background-color: #f2f2f2;
		padding: .2rem 1rem;
		margin: 1rem.5rem;
		width: 100%;
		cursor: pointer;
	}

	.attr-val.active {
		background-color: #007aff;
		/* 选中状态的背景颜色 */
		color: #EF1224;

	}

	.content {
		display: flex;
		flex-direction: column;

	}

	.mod_discount {
		color: #333;
		font-size: 0;
		font-size: 13px;
		line-height: 18px;
		overflow: hidden;
		padding: 18px 20px 5px 38px;
		position: relative;
		word-break: break-word;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 900;
		opacity: 0.7;
	}

	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 999;
		transition: all 0.3s;
	}

	.scrolls {
		width: 100vw;
		height: 60vh;
		padding-top: 10upx;
		z-index: 500;
	}

	.scrollssss {
		width: 100vw;
		height: 60vh;
		padding-top: 10upx;
		z-index: 500;
	}

	body {
		background-color: #f4f4f4;
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		width: 100%;
		color: #fff;
	}

	.swiper-item0 {
		// background-color: #cee1fd;
	}

	.swiper-item1 {
		// background-color: #b2cef7;
	}

	.swiper-item2 {
		// background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}


	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}




	.goods-image-list {
		white-space: nowrap;
		width: 100%;


		.goods-image-item {
			display: inline-block;
			width: 40px;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			margin: 10px 12px;
		}
	}

	.goods-info {
		background-color: #FFF;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;

		.goods-price {
			padding: 12px 18px 10px;
			color: #ff0004;
		}

		.goods-title {
			padding: 12px 18px;
			font-weight: 700;
			line-height: 21px;
		}

		.goods-icons {
			width: 100%;
			display: flex;
			padding: 4px 18px 12px;

			.goods-icon {
				display: flex;
				align-items: center;
				flex: 1;
				height: 16px;
				font-size: 12px;

			}

		}
	}



	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}


	.goods-floor {
		background-color: #FFF;
		display: flex;
		border-radius: 12px;
		margin-top: 12px;
		padding: 0 18px;

		.sku-info {
			color: #8c8c8c;
			font-size: 13px;
			padding: 18px 0;
			position: relative;
			width: 100%;

			.sku-selected {
				display: flex;

				.item-title {
					font-weight: 700;
					width: 38px;
					display: inline-block;
					color: #060606;
				}

				.item-choose {
					text-overflow: ellipsis;
					display: inline-block;
					width: 80%;
					/* height: 15px; */
					white-space: nowrap;
					overflow: hidden;
				}
			}



		}
	}

	.sku-info::after {
		background: url(//img20.360buyimg.com/img/jfs/t1/168610/10/40795/8056/64eedda4F1aed004e/a8502bb8121e0c68.png) no-repeat;
		background-position: -386px -40px;
		display: inline-block;
		height: 40px;
		position: absolute;
		transform: scale(.5) translate(20px, -10px);
		-webkit-transform: scale(.5) translate(20px, -10px);
		width: 40px;
		content: "";
		right: 0;
		top: 12px;

	}

	.popup-content {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		height: 475px;
		overflow: scroll;

		.popup-sku {
			display: flex;
			align-items: flex-end;
			height: 118px;
			margin-bottom: 18px;
			text-align: left;

			.popup-sku-image {
				flex: 1;
			}

			.popup-sku-info {
				flex: 2;

				.popup-sku-price {
					color: #fa1e0a;
				}
			}

			.popup-sku-close {
				position: absolute;
				right: 0px;
				top: 0px;
				width: 32px;
				margin: 1rem;
				cursor: pointer;
			}


		}


		.popup-sku-attr {
			.popup-sku-attr-title {
				padding-left: 18px;
				margin-top: 10px;
				font-weight: 700;

			}

			.popup-sku-attr-valus {
				display: flex;

				.attr-val {
					height: 20px;
					border-radius: 20px;
					background-color: #f2f2f2;
					padding: .2rem 1rem;
					margin: 1rem.5rem;
					width: 100%;
				}
			}
		}

		.buyer-sku {
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			.popup-sku-attr-title {
				padding-left: 18px;
				margin-top: 10px;
				font-weight: 700;
			}

		}

		.popup-bottons {
			display: flex;
			height: 40px;
			margin-top: 1rem;
			margin-bottom: .5rem;
			justify-content: space-evenly;

			.uni-tab__cart-button-right,
			.uni-tab__cart-button-left {
				/* #ifndef APP-NVUE */
				display: flex;
				flex-direction: column;
				/* #endif */
				// flex: 1;
				width: 45%;
				justify-content: center;
				align-items: center;
				/* #ifdef H5 */
				cursor: pointer;
				/* #endif */
				border-radius: 20px;

			}

			.uni-tab__cart-button-left {
				background: linear-gradient(90deg, #FE6035, #EF1224),
			}

			.uni-tab__cart-button-right {
				background: linear-gradient(90deg, #FFCD1E, #FF8A18),
			}

			.uni-tab__cart-button-right-text {
				color: #FFF;
			}


		}


	}
</style>